<template>
  <div>
    <!-- 发布页面的顶部导航 -->
    <van-nav-bar title="发布" fixed @click-left="openLeftPopup" @click-right="save" class="headers">
      <template #left>
        <van-icon name="user-circle-o" size="22" />
      </template>
      <template #right>
        <van-icon name="./static/icon/save.png" size="22" />保存
      </template>
    </van-nav-bar>
    <!-- 
        发布页面的主体内容
        1.表单
        2.板块的置顶帖，热门贴，精华帖等等
        3.板块的帖子预览
    -->
    <div class="main-container">
      <van-field label="选择板块">
        <template #input>
          <van-dropdown-menu>
            <van-dropdown-item v-model="csection_value" :options="csection" />
          </van-dropdown-menu>
        </template>
      </van-field>
      <van-form @submit="onSubmit">
        <van-field
          v-model="name"
          name="name"
          :type="inputfield.name.type"
          :label="inputfield.name.label"
          :placeholder="inputfield.name.placeholder"
          v-if="inputfield.name"
        />
        <van-field name="switch" label="匿名">
          <template #input>
            <van-switch v-model="isanonymous" size="20" />
          </template>
        </van-field>
        <van-field
          v-model="intro"
          name="intro"
          :rows="inputfield.intro.rows"
          :autosize="inputfield.intro.autosize"
          :show-word-limit="inputfield.intro.showWordLimit"
          :maxlength="inputfield.intro.maxlength"
          :type="inputfield.intro.type"
          :label="inputfield.intro.label"
          :placeholder="inputfield.intro.placeholder"
          v-if="inputfield.intro"
        />
        <van-field :label="inputfield.image" v-if="inputfield.image">
          <template #input>
            <van-uploader v-model="images" multiple :after-read="ReadImage" />
          </template>
        </van-field>
        <vue-html5-editor
          :content="inputfield.content.placeholder"
          ref="editor"
          :z-index="1"
          v-if="inputfield.content"
          @change="updateData"
        ></vue-html5-editor>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'Release',
  data() {
    return {
      name: '',
      intro: '',
      images: [],
      content: '',
      isanonymous: false,
      csection_value: 0
    }
  },
  computed: {
    ...mapState(['pageControl']),

    fsection_value() {
      return Number(this.$route.params.fsection)
    },
    fsection() {
      for (var i in this.pageControl.sectionlist) {
        if (this.pageControl.sectionlist[i].id === this.fsection_value) {
          return this.pageControl.sectionlist[i]
        }
      }
    },
    csection() {
      var sectionlist = []
      sectionlist.push({
        text: this.fsection.name + '（父板块）',
        value: this.fsection.id
      })
      for (var i in this.pageControl.sectionlist) {
        if (this.pageControl.sectionlist[i].fsection === this.fsection_value) {
          sectionlist.push({
            text: this.pageControl.sectionlist[i].name,
            value: this.pageControl.sectionlist[i].id
          })
        }
      }
      this.csection_value = this.fsection.id
      return sectionlist
    },
    inputfield() {
      if (this.fsection.type === 0) {
        return {
          name: {
            label: '商品名',
            type: 'text',
            placeholder: '请输入商品名'
          },
          image: '封面',
          intro: {
            label: '价格',
            type: 'number'
          },
          content: {
            placeholder: '请输入详细介绍'
          }
        }
      } else if (this.fsection.type === 1) {
        return {
          name: {
            label: '主题',
            type: 'text',
            placeholder: '请输入主题'
          },
          intro: {
            label: '主题简介',
            type: 'textarea',
            placeholder: '100字以内，描述主题背景',
            maxlength: 100,
            rows: 2,
            autosize: true,
            showWordLimit: true
          },
          content: {
            placeholder: '请输入详细介绍'
          }
        }
      } else if (this.fsection.type === 2) {
        return {
          content: {
            placeholder: '请输入留言信息'
          }
        }
      } else if (this.fsection.type === 3) {
        return {
          name: {
            label: '物品名',
            type: 'text',
            placeholder: '请输入物品名'
          },
          image: '物品图片',
          content: {
            placeholder: '具体描述物品特征'
          }
        }
      }
    }
  },
  watch: {},
  methods: {
    ...mapMutations(['openLeftPopup', 'openTopPopup_search']),
    save() {},
    onSubmit(field) {
      this.$http
        .post('/topic/save', {
          name:this.name,
          intro:this.intro,
          image:this.images[0],
          isanonymous:this.isanonymous,
          section:this.csection_value,
          content:this.content
        })
        .then(res => {
          if(res.data.status===200)
          {
            this.$dialog({message:res.data.msg})
          }
        })
        .catch(res => {
          console.log(res)
        })
    },
    updateData(e) {
      this.content = e
    },
    ReadImage(file) {
      let content = file.file
      let data = new FormData()
      data.append('img', content)
      this.$http
        .post('/media/upload/image', data)
        .then(res => {
          if(res.data.status===200)
          {
            console.log(res)
            this.images.push(res.data.image)
          }
        })
        .catch(err => {})
      
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-form {
  background-color: #fff;
}
</style>